<template>
  <a-card class="general-card" title="售后管理" :bordered="false">
    <a-tabs @change="(val)=>{apiParams.serviceStatus = val;}" :default-active-key="serviceStatus">
      <a-tab-pane key="ALL" title="全部"></a-tab-pane>
      <a-tab-pane key="APPLY" title="待审核"></a-tab-pane>
      <a-tab-pane key="BUYER_RETURN" title="退货待商家收货"></a-tab-pane>
      <a-tab-pane key="PASS" title="待买家退货"></a-tab-pane>
      <a-tab-pane key="COMPLETE" title="已完成"></a-tab-pane>
      <a-tab-pane key="BUYER_CANCEL" title="买家取消售后"></a-tab-pane>
      <a-tab-pane key="REFUSE" title="商家拒绝"></a-tab-pane>
      <a-tab-pane key="WAIT_REFUND" title="等待平台退款"></a-tab-pane>
    </a-tabs>

    <PickSearchColumn :columns="columnsSearch" @reset="(val) => {apiParams = {...apiParams, ...val}}" @search="(val) => {apiParams = {...apiParams, ...val}}">
    </PickSearchColumn>
    <div class="afterSale-box">
      <div class="afterSale-tab">
        <p style="width: 30%">售后详情</p>
        <p style="width: 10%">会员ID</p>
        <p style="width: 10%">会员昵称</p>
        <p style="width: 10%;">商家名称</p>
        <p style="width: 10%">售后金额</p>
        <p style="width: 10%">售后类型</p>
        <p style="width: 10%;">售后状态</p>
        <p style="width: 10%">操作</p>
      </div>
      <div class="afterSale-lists" v-if="columnsTableList && columnsTableList.length">
        <div class="afterSale-item" v-for="(afterSale, afterSaleIndex) in columnsTableList" :key="afterSaleIndex">
          <div class="header">
            <p>售后服务单号：<a-typography-text copyable bold><span style="color: #333;">{{afterSale.sn}}</span></a-typography-text></p>
            <p>订单编号：<a-typography-text copyable bold><span style="color: #333;">{{afterSale.orderSn}}</span></a-typography-text></p>
            <p>申请时间：<span style="color: #333;">{{afterSale.createTime}}</span></p>
          </div>
          <div class="body">
            <div style="width: 30%;line-height: 32px;">
              <div class="goods">
                <div >
                  <img class="hover-color" :src="afterSale.goodsImage" alt=""/>
                  <div class="goods-info">
                    <div style="width: 100%;" class="hover-color"><a-typography-text copyable bold>{{afterSale.goodsName}}</a-typography-text></div>
                  </div>
                  <div class="goods-num">
                    <span class="global_color"> {{unitPrice(afterSale.flowPrice, '￥')}} </span>
                    <span style="color: red;"> x{{afterSale.num}} </span></div>
                </div>
              </div>
            </div>
            <div style="width: 10%;line-height: 32px;">{{afterSale.memberId}}</div>
            <div style="width: 10%;line-height: 32px;">
              <router-link :to="'/detail/member-detail?id='+ afterSale.memberId"> 
                <a-typography-text type="primary" >{{afterSale.memberName}}</a-typography-text> 
              </router-link> 
            </div>
            <div style="width: 10%;line-height: 32px;">{{afterSale.storeName}}</div>
            <div style="width: 10%;line-height: 32px;">{{unitPrice(afterSale.applyRefundPrice, '￥')}}</div>
            <div style="width: 10%;line-height: 32px;"><a-badge style="margin-right: 5px" :color="customServiceTypeList(afterSale.serviceType).color"></a-badge>{{customServiceTypeList(afterSale.serviceType).label}}</div>
            <div style="width: 10%;line-height: 32px;"><a-badge style="margin-right: 5px" :color="customServiceStatusList(afterSale.serviceStatus).color"></a-badge>{{customServiceStatusList(afterSale.serviceStatus).label}}</div>
            <div style="width: 10%"><a-button type="text" status="success" @click="$openWindow({name: 'after-order-detail', query: {id: afterSale.sn,}})">查看</a-button></div>
          </div>
        </div>
      </div>
      <a-empty v-else></a-empty>
    </div>
    <div class="paginationBox">
      <a-pagination :total="paginationParams.total" show-page-size :current="apiParams.pageNumber" :page-size="apiParams.pageSize"
                    @change="(number) => { apiParams.pageNumber = number; }" @page-size-change="(number) => {apiParams.pageSize = number; apiParams.pageNumber = 1;}"
      ></a-pagination>
    </div>
  </a-card>
</template>

<script setup lang="ts">
const serviceStatus = ref<string>('ALL');
import {afterSaleOrderPage, getOrderList} from '@/api/order';
import { PickSearchColumn, PickTablePage } from '@pickmall/ui-v3-components';

import { ColumnsDataRule, MethodsRule, SearchRule } from '@/types/global';
import { afterSaleType, serviceStatus } from '@/utils/tools';
import {ref, onMounted, watch} from 'vue';
import { useRoute } from 'vue-router';
import { unitPrice } from '@/utils/filters';

const apiParams = ref<any>({
  serviceStatus:serviceStatus.value
});

const columnsTableList = ref();
const paginationParams = ref({
  total: 0
});
// 售后类型枚举
const customServiceTypeList = (type: string) => {
  let result = null as any;
  if (type === 'RETURN_MONEY') {
    result = {label: '退款', value: 'RETURN_MONEY', color: 'orange'};
  } else if (type === 'RETURN_GOODS') {
    result = {label: '退货', value: 'RETURN_GOODS', color: 'magenta'};
  } else {
    result = {label: '', value: '', color: ''};
  }
  return result;
};

// 售后状态枚举
const customServiceStatusList = (type: string) => {
  let result = null as any;
  if (type === 'APPLY') {
    result = {label: '申请中', value: 'APPLY', color: 'orange'};
  } else if (type === 'PASS') {
    result = {label: '已通过', value: 'PASS', color: 'magenta'};
  } else if (type === 'REFUSE') {
    result = {label: '已拒绝', value: 'REFUSE', color: 'magenta'};
  }else if (type === 'BUYER_RETURN') {
    result = {label: '待卖家收货', value: 'BUYER_RETURN', color: 'magenta'};
  }else if (type === 'SELLER_CONFIRM') {
    result = {label: '卖家确认收货', value: 'SELLER_CONFIRM', color: 'magenta'};
  }else if (type === 'BUYER_CANCEL') {
    result = {label: '买家取消售后', value: 'BUYER_CANCEL', color: 'magenta'};
  }else if (type === 'WAIT_REFUND') {
    result = {label: '等待平台退款', value: 'WAIT_REFUND', color: 'magenta'};
  }else if (type === 'COMPLETE') {
    result = {label: '完成', value: 'COMPLETE', color: 'magenta'};
  }else {
    result = {label: '', value: '', color: ''};
  }
  return result;
};

const tablePageRef = ref('');
const columnsSearch: Array<SearchRule> = [
  {
    label: '订单编号',
    model: 'orderSn',
    disabled: false,
    input: true,
  },
  {
    label: '售后单号',
    model: 'sn',
    disabled: false,
    input: true,
  },

  {
    label: '售后类型',
    model: 'serviceType',
    disabled: false,
    select: {
      options: afterSaleType,
    },
  },
  {
    label: '商家名称',
    model: 'storeName',
    disabled: false,
    input: true,
  },
  {
    label: '会员名称',
    model: 'memberName',
    disabled: false,
    input: true,
  },
  {
    label: '申请时间',
    disabled: false,
    datePicker: {
      type: 'range',
    },
  },
];


const sortMethods: MethodsRule = {
  title: '操作',
  width: 100,
  fixed: 'right',
  methods: [
    {
      slot: true,
      slotTemplate: 'btnList',
    },
  ],
};
// 商品订单列表
const getAfterSaleOrder = async () => {
  const res = await afterSaleOrderPage(apiParams.value);
  if (res.data.success) {
    columnsTableList.value = res.data.result.records;
    paginationParams.value = res.data.result;
  }
};
// 初始化监听
watch(() => apiParams.value,
    (val)=>{
      getAfterSaleOrder();
    }, {deep: true, immediate: true}
);
onMounted(() => {
  getAfterSaleOrder();
});
</script>



<style lang="less" scoped>
.export {
  margin: 10px 20px 10px 0;
}

.export-excel-wrapper {
  display: inline;
}

.afterSale-box {
  .afterSale-tab {
    width: 100%;
    height: 50px;
    background-color: #f3f4f5;
    color: #252931;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    p {
      flex-shrink: 0;
      text-align: center;
    }
  }
  .afterSale-lists {
    .afterSale-item {
      box-sizing: border-box;
      border: 1px solid #eeeff0;
      margin-bottom: 10px;
      font-size: 14px;
      .header {
        width: 100%;
        height: 50px;
        background-color: #f8f9fa;
        color: #333;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 20px;
        position: relative;
        font-size: 14px;
        p {
          margin-right: 30px;
        }
        .delete-order {
          position: absolute;
          top: 3px;
          right: 0;
          margin-right: 0;
        }
      }
      .body {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        text-align: center;
        color: #252931;
        > div {
          flex-shrink: 0;
          box-sizing: border-box;
          padding: 14px 0;
          /*border-left: 1px solid #e5e5e5;*/
        }
        > div:nth-of-type(1) {
          border-left: none;
          padding: 0;
          text-align: left;
        }
        .goods {
          padding: 4px 0;
        }
        .goods > div {
          width: 100%;
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          /*border-bottom: 1px solid #e5e5e5;*/
          box-sizing: border-box;
          padding: 10px;
          position: relative;
          img {
            width: 56px;
            height: 56px;
            flex-shrink: 0;
            border-radius: 4px;
          }
          .goods-info {
            flex-shrink: 1;
            width: 100%;
            box-sizing: border-box;
            padding: 6px 15px;
            color: #252931;
            font-size: 14px;
            line-height: 18px;
            .tag {
              color: #aaaaaa;
              white-space: nowrap;
              margin-top: 12px;
              line-height: 12px;
              width: 100%;
              > span {
                display: inline-block;
              }
              > span:nth-of-type(1) {
                width: 126px;
              }
              > span:nth-of-type(3) {
                color: #e4393c;
                text-align: end;
                position: absolute;
                right: 10px;
                bottom: 10px;
              }
            }
          }
          .goods-num {
            flex-shrink: 0;
            width: 25%;
            text-align: right;
          }
        }
        .goods > div:nth-last-of-type(1) {
          border-bottom: none;
        }
        .hover-color {
          /*overflow: hidden;*/
          /*-webkit-line-clamp: 2;*/
          /*text-overflow: ellipsis;*/
          /*display: -webkit-box;*/
          /*-webkit-box-orient: vertical;*/
          /*white-space: pre-wrap;*/
        }
      }
    }
  }
}
.paginationBox {
  margin-top: 18px;
  display: flex;
  flex-direction: row-reverse;
}

a{
  list-style: none !important;
  text-decoration:none !important;
  color: inherit !important;
}
</style>
